<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Alpine.js x-bind directive.</title>

    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
<!--01. x-bind: placeholder-->
<input x-data="{ placeholder: 'Type something...' }"
       x-bind:placeholder="placeholder"
       type="text">

<!--02. shorthand syntax-->
<input x-data="{ placeholder: 'Type something...' }"
       :placeholder="placeholder"
       type="text">

<!--03. x-bind: class-->
<style>.hidden { display: none !important; }</style>
<div x-data="{ open: false }">
    <button x-on:click="open = ! open">Toggle</button>
    <span :class="open ? '' : 'hidden'">Content</span>
</div>

<!--04. class object syntax-->
<div x-data="{show: false}" :class="{ 'hidden': ! show }">Content</div>
<div x-data="{ show: true }" class="hidden" :class="{ 'hidden': ! show }">Content</div>

<!--05. class special behavior-->
<div x-data="{ hide: true}" class="opacity-50" :class="hide && 'hidden'"></div>
<div x-data="{ hide: true }" class="opacity-50" :class="hide && 'hidden'"></div>
<div x-data="{ hide: false }" class="opacity-50" :class="hide && 'hidden'"></div>

<!--06. x-bind: style-->
<div x-data :style="{ color: 'red', display: 'flex' }"></div>
<div x-data x-bind:style="true && { color: 'red' }"></div>
<div x-data style="padding: 1rem;" :style="{ color: 'red', display: 'flex' }"></div>
<div x-data="{ styles: { color: 'red', display: 'flex' }}">
    <div :style="styles">
    </div>
</div>

<!--07. x-bind directives-->
<div x-data="dropdown">
    <button x-bind="trigger">Toggle</button>

    <span x-bind="dialogue">Dropdown Contents</span>
</div>
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('dropdown', () => ({
            open: false,

            trigger: {
                ['x-ref']: 'trigger',
                ['@click']() {
                    this.open = true
                },
            },

            dialogue: {
                ['x-show']() {
                    return this.open
                },
                ['@click.outside']() {
                    this.open = false
                },
            },
        }))
    })
</script>

</body>
</html>